<template>
	<view>
		<view class="page-foot bg-white">
			<view class="foot-box1 flex-box tc m-hairline--top">
				<navigator class="mr45" open-type="switchTab" url="/pages/index/index"  hover-class="none">
					<image class="icon" src="/static/icon/icon_home.png" mode="aspectFit"></image>
					<view class="fs22 col-6">首页</view>
				</navigator>
				<view class="mr30" @click="sharePopOpen">
					<image class="icon" src="/static/icon/icon_share2.png" mode="aspectFit"></image>
					<view class="fs22 col-6">分享</view>
				</view>
				<view class="g-price2 flex-1 fwb">{{courseDetail.salesprice}}</view>
				<view class="g-btn1 middle" v-if="!courseDetail.enroll_status" @click="enroll()">我要报名</view>
				<view class="g-btn1 middle" v-else>报名成功</view>
			</view>
		</view>
		<view class="container pr">
			<image class="m-backdrop" src="../../static/icon/icon_back2.png" mode="widthFix"></image>
			<view class="info-box p30 pr">
				<image class="img-top mb30" :src="courseDetail.thumb_image" mode="aspectFill"></image>
				<view class="m-ellipsis fs28 col-black mb35">{{courseDetail.name}}</view>
				<view class="flex-box fs22 col-9 mb30">
					<image class="icon-already mr10" src="/static/icon/icon_already.png" mode="aspectFit"></image>
					<view>已报名{{courseDetail.enroll_count}}人</view>
					<view class="mlr15">|</view>
					<view>剩余{{courseDetail.left_count}}人</view>
					<view class="flex-1 tr fs20 col-red">{{courseDetail.state_text}}</view>
				</view>
				<view class="flex-box" @click="sharePopOpen">
					<view class="g-price2 flex-1">{{courseDetail.salesprice}}</view>
					<view class="btn-share m-button flex-box flex-center">
						<image class="mr10" src="/static/icon/icon_share4.png" mode="aspectFit"></image>
						<text>分享</text>
					</view>
				</view>
			</view>
			<!--  -->
			
			<view class="time-address-box ptb40 plr25 fs26 col-3">
				<view class="flex-box mb40 flex-align-start">
					<image class="g-icon30 mr20 mt5" src="/static/icon/icon_time1.png" mode="aspectFit"></image>
					<view class="flex-1 ">
						<view class="mb30">报名截止时间：{{courseDetail.enroll_end_time_text}}</view>
						<view>开课时间：{{courseDetail.start_time_text}} 至 {{courseDetail.end_time_text}}</view>
					</view>
				</view>
				<view class="flex-box mb40 flex-align-start">
					<image class="g-icon30 mr20 mt5" src="/static/icon/icon_location.png" mode="aspectFit"></image>
					<view class="flex-1">开课地点：{{courseDetail.address}}</view>
				</view>
				<view class="flex-box flex-align-start">
					<image class="g-icon30 mr20 mt5" src="/static/icon/ico_call1.png" mode="aspectFit"></image>
					<view class="flex-1">咨询电话：{{courseDetail.mobile}}</view>
				</view>
			</view>
			<!--  -->
			<view class="intro-box ptb40 plr30">
				<view class="fs32 col-3 fwb mb30">详情介绍</view>
				<view class="text">
					<rich-text :nodes="courseDetail.introduce"></rich-text>
				</view>
			</view>
		</view>
	<!-- 分享弹窗 -->
	<uni-popup ref="sharePopup" type="bottom">
		<view class="share-pop" catchtouchmove="true">
			<view class="flex-box flex-between mb70 tc">
				<!-- #ifdef MP-WEIXIN -->
				<button open-type="share" class="fs28 col-black">
					<image class="icon" src="/static/icon/icon_wx.png" mode="aspectFit"></image>
					<view>转发好友</view>
				</button>
				<!-- #endif -->
				
				<view @click="posterPopOpen" class="fs28 col-black">
					<image class="icon" src="/static/icon/icon_poster.png" mode="aspectFit"></image>
					<view>生成海报</view>
				</view>
				<!-- #ifdef H5 -->
				<view class="fs28 col-black">
					<image class="icon" src="/static/icon/icon_link.png" mode="aspectFit"></image>
					<view>复制链接</view>
				</view>
				<!-- #endif -->
				
			</view>
			<view class="ptb20 fs28 col-9 tc" @click="sharePopClose">关闭</view>
		</view>
	</uni-popup>
	<!-- 海报弹窗 -->
	<uni-popup ref="posterPopup" type="center">
		<view class="poster-popup" catchtouchmove="true">
			<image @longpress="saveImage" class="img-poster" :src="posterPath" mode="widthFix"></image>
			<view class="tip">—— 长按保存课程海报图片 ——</view>
		</view>
	</uni-popup>
	<!-- 画板 -->
	<l-painter isCanvasToTempFilePath @success="posterPath = $event" custom-style="position: fixed; left: 200%;" css="width: 630rpx;height: 830rpx;border-radius: 15rpx;">
		<l-painter-image src="/static/icon/icon_back10.png" css="object-fit: cover; object-position: 50% 50%; width: 100%; height: 830rpx;border-radius: 15rpx;display:block;" />
		<l-painter-view css="position: absolute;top:0;left:0;right:0;bottom:0;width: 630rpx; height: 830rpx;">
			<l-painter-view css="position: absolute;top:70rpx;left:0;right:0rpx;text-align:center;">
				<l-painter-text text="课程分享" css="font-size:36rpx;font-weight:bold;color:#fff;line-height:40rpx;"></l-painter-text>
			</l-painter-view>
			<l-painter-view css="position: absolute;top:85rpx;left:105rpx;width:120rpx;height:2rpx;background:#FFFFFF;"></l-painter-view>
			<l-painter-view css="position: absolute;top:85rpx;right:105rpx;width:120rpx;height:2rpx;background:#FFFFFF;"></l-painter-view>
			<l-painter-view css="position: absolute;top:140rpx;left:75rpx;right:75rpx;height: 90rpx;width: 480rpx;border: 1rpx solid #F24682;padding:8rpx;">
				<l-painter-view css="width:100%;height:100%;background: #F24682;text-align:center;">
					<l-painter-text :text="courseDetail.name" css="font-size:36rpx;color:#FFF;line-height:90rpx;line-clamp:1;"></l-painter-text>
				</l-painter-view>
			</l-painter-view>
			<l-painter-view css="position: absolute;top:370rpx;left:35rpx;">
				<l-painter-text text="记录生活的点点滴滴\n留下早起奋斗的痕迹" css="font-size:28rpx;color:#000;line-height:48rpx;line-clamp:3;"></l-painter-text>
			</l-painter-view>
			<l-painter-view css="position: absolute;top:520rpx;left:40rpx;width:275rpx;">
				<l-painter-text text="金牌讲师：" css="font-size:28rpx;color:#000;line-height:40rpx;"></l-painter-text>
				<l-painter-text :text="courseDetail.teacher.name" css="font-size:28rpx;color:#F24682;line-height:40rpx;"></l-painter-text>
			</l-painter-view>
			<l-painter-view css="position: absolute;top:520rpx;right:20rpx;width:295rpx;">
				<l-painter-text text="课程报名人次：" css="font-size:28rpx;color:#000;line-height:40rpx;"></l-painter-text>
				<l-painter-text :text="courseDetail.enroll_count" css="font-size:28rpx;color:#F24682;line-height:40rpx;"></l-painter-text>
			</l-painter-view>
			<l-painter-view css="position: absolute;top:630rpx;left:40rpx;width:550rpx;border: 2rpx dashed #C2C2C2;"></l-painter-view>
			<l-painter-image
				:src="courseDetail.teacher.thumb_image"
				css="position: absolute;bottom: 45rpx;left: 40rpx; object-fit: cover; object-position: 50% 50%; width: 102rpx; height: 102rpx;border-radius: 50%;"
			/>
			<l-painter-view css="position: absolute;top: 685rpx;left:165rpx;">
				<l-painter-text :text="courseDetail.teacher.name" css="font-size:28rpx;color:#000;line-height:40rpx;line-clamp:1;"></l-painter-text>
			</l-painter-view>
			<l-painter-view css="position: absolute;top: 725rpx;left:165rpx;">
				<l-painter-text text="邀请您一起学习\n长按扫码听课" css="font-size:24rpx;color:#000;line-height:30rpx;line-clamp:2;"></l-painter-text>
			</l-painter-view>
			<l-painter-image :src="courseDetail.qrcode" css="position: absolute;top: 675rpx;right:30rpx;object-fit: cover; object-position: 50% 50%; width: 108rpx; height: 108rpx;display:block;" />
			
		</l-painter-view>
	</l-painter>
	</view>
</template>

<script>
export default {
	data() {
		return {
			course_id: 0,
			courseDetail: {teacher:{name:''}},
			posterPath: '',
			//platformStatus: 1,
			//isIos: getApp().globalData.isIos,
		};
	},
	onLoad(options) {
		let scene = decodeURIComponent(options.scene) || '';
		if(scene){
			for (var i = 0; i < scene.split('&').length;i++){
			    var arr = scene.split('&')[i].split('=');
				if(arr[0] == 'offline_id'){
					options['course_id'] = arr[1];
				}else{
					options[arr[0]] = arr[1];
				}
			    
			}
		}
		this.course_id = options.course_id || 0;
		//this.fetchConfig();
		this.fetchOfflineCourseDetail();
		let that = this;
		uni.$on('buySuccess',function(data){
			that.fetchOfflineCourseDetail();
		})
	},
	onShareAppMessage(e){
		if(e.from=='button'){
			let courseDetail = this.courseDetail;
			//console.log(courseDetail)
			return {
			  title: courseDetail.name,
			  imageUrl: courseDetail.thumb_image,
			  path: ''
			}
		}
	},
	methods: {
		// 设置导航栏标题
		setNavigationBarTitle(text) {
			uni.setNavigationBarTitle({
				title: text
			});
		},
		//是否开启
		fetchConfig() {
			this.$core.get({
				url: 'xiluedu.config/config',
				data: {name:'shopinfo'},
				success: ret => {
					this.platformStatus = ret.data.vip_status;
				},
				loading: false
			});
		},
		//课程详情
		fetchOfflineCourseDetail(){
			let course_id = this.course_id;
			this.$core.get({url:'xiluedu.offline_course/detail',data:{offline_course_id: course_id},success:(ret)=>{
				 ret.data.enroll_count = ret.data.enroll_count.toString();
				 this.courseDetail = ret.data;
				 this.setNavigationBarTitle(ret.data.name);
			}});
		},
		
		enroll(){
			// if(this.platformStatus && getApp().globalData.isIos){
			// 	uni.showModal({
			// 		title:'提示',
			// 		content: "IOS端暂不支持支付",
			// 		success() {
						
			// 		}
			// 	})
			// 	return false;
			// }
			uni.navigateTo({
				url: '/pages/online_registration/online_registration?course_id='+this.courseDetail.id
			})
		},
		
		
		// 打开分享弹窗
		sharePopOpen() {
			this.$refs.sharePopup.open();
		},
		// 关闭分享弹窗
		sharePopClose() {
			this.$refs.sharePopup.close();
		},
		// 打开海报弹窗
		posterPopOpen() {
			this.$refs.posterPopup.open();
			this.$refs.sharePopup.close();
		},
		saveImage() {
			let that = this;
			uni.saveImageToPhotosAlbum({
				filePath: that.posterPath,
				success: function() {
					uni.showToast({
						icon: 'success',
						title: '保存成功'
					});
				}
			});
		}
	}
};
</script>

<style scoped>
.info-box {
	border-bottom: 1rpx solid #f7f7f7;
}
.info-box .img-top {
	display: block;
	width: 100%;
	height: 298rpx;
	border-radius: 10rpx;
}
.info-box .icon-already {
	display: block;
	width: 30rpx;
	height: 30rpx;
}

.info-box .btn-share {
	margin-left: 15rpx;
	width: 132rpx;
	height: 42rpx;
	border: 1rpx solid #e1e1e1;
	border-radius: 21rpx;
	font-size: 24rpx;
	color: #333333;
	line-height: 42rpx;
}
.info-box .btn-share image {
	display: block;
	width: 30rpx;
	height: 30rpx;
}
/*  */
.time-address-box {
	border-bottom: 20rpx solid #f7f7f7;
}
/*  */
.intro-box .text {
	font-size: 28rpx;
	color: #000000;
	line-height: 60rpx;
}
/*  */
.foot-box1 {
	padding: 25rpx 30rpx;
}

.foot-box1 .icon {
	margin: 0 auto 5rpx;
	display: block;
	width: 40rpx;
	height: 40rpx;
}
/*  */

/*  */
.share-pop {
	padding: 80rpx 70rpx 40rpx;
	width: 750rpx;
	max-height: 500rpx;
	background: #ffffff;
	border-radius: 20rpx 20rpx 0 0;
}
.share-pop .icon {
	margin: 0 auto 30rpx;
	display: block;
	width: 90rpx;
	height: 90rpx;
	border-radius: 50%;
}
.share-pop button{
	margin: 0;
	padding: 0;
	line-height: 30rpx;
	background: #fff;
}
.share-pop button::after{
	display: none;
}
/*  */

.poster-popup {
	width: 630rpx;
	height: 830rpx;
}
.poster-popup .tip {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -65rpx;
	font-size: 24rpx;
	color: #ffffff;
	line-height: 32rpx;
	text-align: center;
}

.poster-popup .img-poster {
	display: block;
	width: 100%;
	height: auto;
	bottom: ;
}
@media only screen and (min-width: 800px){
	.info-box .img-top{
		height: 665rpx;
		border-radius: 30rpx;
	}
	.share-pop{
		max-width: 800px;
		margin-left: auto;
		margin-right: auto;
	}
}
</style>
